<template>
  <div class="detail">
    <transition appear appear-active-class="fadeInUpMini">
      <div>
        <div class="title">{{ blogDetail?.title }}</div>
        <div class="user">
          {{ blogDetail?.way }} | {{ blogDetail && time(blogDetail.time) }}
          <span class="see">
            <i class="iconfont iconyanjing" style="color: #5183e6"></i>
            <span style="color: #5183e6">{{ blogDetail?.seeNum }}</span>
          </span>
          <span class="see">
            <i class="iconfont icondianzan" style="color: #5183e6"></i>
            <span style="color: #5183e6">{{ blogDetail?.goodNum }}</span>
          </span>
          <span class="see">
            <i class="iconfont iconshoucang" style="color: #5183e6"></i>
            <span style="color: #5183e6">{{ blogDetail?.collectNum }}</span>
          </span>
        </div>
      </div>
    </transition>

    <transition appear appear-active-class="fadeInY">
      <div class="content">
        <div v-html="blogDetail?.content"></div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { useRoute } from "vue-router";
import axios from "@/http";
import { formatTime } from "@/formatTime";
import { Tblog } from "@/type/blog";
type TBlogDetail = Tblog & { content: string };
onMounted(() => {
  getBlogDetail();
});
const route = useRoute();
const blogDetail = ref<TBlogDetail | null>(null);
const time = computed(() => {
  return (time: string) => {
    return formatTime(time);
  };
});
const getBlogDetail = () => {
  axios
    .get("/blog/detail", {
      params: {
        id: route.params.id,
      },
    })
    .then((res) => {
      blogDetail.value = res.data.data;
    });
};
</script>

<style lang="scss" scoped>
.detail {
  padding: 20px;
  .title {
    text-align: center;
    font-size: 17px;
    font-weight: bold;
  }
  .user {
    font-size: 12px;
    text-align: center;
    color: $blue;
    margin-top: 8px;
    .see {
      margin: 0 8px;
      i {
        font-size: 12px;
        margin-right: 4px;
      }
    }
  }
  .content {
    margin-top: 20px;
    font-size: 13px;
    color: $font-color;
    :deep(p) {
      margin-bottom: 12px;
      color: #444;
    }
    :deep(h3) {
      margin-bottom: 10px;
    }
    :deep(h2) {
      margin-bottom: 10px;
    }
    :deep(h4) {
      margin-bottom: 10px;
    }
    :deep(h5) {
      margin-bottom: 10px;
    }
    :deep(h1) {
      margin-bottom: 10px;
    }
    :deep(.hljs) {
      font-size: 10px;
      margin-bottom: 10px;
      border-radius: 10px;
      color: #fff;
      background-color: #333;
      box-shadow: 0 4px 6px 0px #666;
      overflow: scroll;
      padding: 10px;
    }
    :deep(img) {
      width: 100%;
    }
    // :deep(code) {
    //   color: #fff;
    // }
    :deep(li) {
      list-style: auto;
      margin: 4px 0;
    }
  }
}
</style>
